<template>
  <div>
    <div class="u_content_box">
      <div class="u_content_top">
        <div>
          <a-button type="primary" icon="plus" @click="add">新增</a-button>
        </div>
        <!-- <div>
                <a-input-group compact>
                  <a-input-search placeholder="请输入" style="width: 300px" enter-button @search="onSearch" />
                </a-input-group>
              </div> -->
      </div>
      <div class="u_content_input">
        <a-table :columns="columns" size="small" :pagination="false" :data-source="list" @change="handleTableChange2"
          :scroll="{ y: screenHeight, x: 1300 }">

          <span slot="image" slot-scope="image">
            <img :src="'https://cdn.fanzhuankj.top/' + image" alt="" class="goodsImg">
          </span>

        </a-table>
      </div>
    </div>
    <div style="display: flex;justify-content: end;"> <a-pagination @change="changePage" v-model:current="current"
        :total="total" show-less-items /></div>
    <edit v-if="editflag" :flag="editflag" :list="editList" @func="show"></edit>
    <loading v-if="load == 0" class="loading"></loading>
    <router-view />
  </div>
</template>

<script>
const columns = [


  {
    title: "名称",
    width: 110,
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "账号",
    width: 110,
    dataIndex: "account",
    key: "account",
    align: "center",
  },


  {
    title: '收益(抖音付费)',
    width: 110,
    dataIndex: "totalDyPriceAll",
    key: 'totalDyPriceAll',
    align: "center",
  },
  {
    title: '订单数(抖音)',
    width: 110,
    dataIndex: "totalDyPriceNum",
    key: 'totalDyPriceNum',
    align: "center",
  },
  {
    title: '收益(快手付费)',
    width: 110,
    dataIndex: "totalKsPriceAll",
    key: 'totalKsPriceAll',
    align: "center",
  },
  {
    title: '订单数(快手)',
    width: 110,
    dataIndex: "totalKsPriceNum",
    key: 'totalKsPriceNum',
    align: "center",
  },

  {
    title: "",
    key: "edit",
    fixed: "right",
    width: 60,
    scopedSlots: { customRender: "edit" },
    align: "center",
  },
  {
    title: "",
    key: "cancle",
    fixed: "right",
    width: 60,
    scopedSlots: { customRender: "cancle" },
    align: "center",
  },
]
const ipagination = {
  current: 1,
  pageSize: 10,
  pageSizeOptions: ["10"],
  showTotal: (total, range) => {
    return range[0] + "-" + range[1] + " " + "共" + total + "条"
  },
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
}

import edit from "./authorEdit.vue"
import loading from "../../components/loading.vue"
import { indexList, indexDel, getImgToken, getAuthorList, getAuthorVideoList, deleteVideo } from "../../http/api"
export default {
  name: "userMsg",
  data () {
    return {
      //搜索
      searchKey: "",
      searchText: "",
      columns,
      list: [],
      ipagination: {},
      editflag: false,
      editList: {},
      page: 1,
      load: 1, //加载中
      current: 1,
      imgToken: '',
      userInfo: {},
      skip: 0,
      total: 0,
      screenHeight: ''
    }
  },
  created () {
    //获取屏幕高度
    this.screenHeight = window.innerHeight * 0.6
    console.log(this.screenHeight)
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.ipagination.current = 1
    this.getList()
    this.getImgToken()

  },
  methods: {
    //分页
    changePage (e) {
      console.log(e)
      this.skip = (e - 1) * 10
      this.getList()
    },
    //搜索
    onSearch (e) {
      this.searchText = e
      this.page = 1
      this.ipagination.current = 1
      this.indexList(this.page, this.$store.state.user.shopId)
    },
    //删除
    shanchu (_id) {
      console.log(_id)

      this.deleteVideo(_id)
    },
    //编辑
    edit (list) {
      // console.log(list);
      this.editflag = true
      list.imgToken = this.imgToken
      this.editList = list
    },
    //新增    
    async add () {

      this.editflag = true
      this.editList = {}

      this.editList.imgToken = this.imgToken

    },
    //子组件传值展示model框
    show (e) {
      // console.log(e);
      this.editflag = e
      this.list = []
      // this.indexList(this.page, this.$store.state.user.shopId)
      this.getList()
    },
    //分页
    handleTableChange2 (pagination, filters, sorter) {
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      this.page = pagination.current
      this.indexList(this.page, this.$store.state.user.shopId)
    },
    //视频列表
    async getList () {
      this.load = 0
      const parameter = {
        "$url": "getAuthorList",
        "skip": this.skip,


      }
      const res = await getAuthorList(parameter)
      console.log('视频数据列表', res)
      var d = res.res
      this.load = 1
      d.data.forEach(item => {
        item.totalKsPriceAll = ((item.totalKsPriceAll ? item.totalKsPriceAll : 0) / 1000).toFixed(2)
        item.totalDyPriceAll = ((item.totalDyPriceAll ? item.totalDyPriceAll : 0) / 1000).toFixed(2)
      })

      this.total = res.total_count.total

      this.list = d.data
    },
    async deleteVideo (_id) {
      const parameter = {
        "$url": "deleteVideo",
        "_id": _id


      }
      const res = await deleteVideo(parameter)
      console.log('删除首推', res)
      if (res.code == 200) {
        this.$tishi("success", res.msg)
        if ((this.ipagination.total - 1) % this.ipagination.pageSize == 0 && (this.page - 1) != 0) {
          this.page = this.page - 1
        }
        this.list = []
        this.getList()
      } else {
        this.$tishi("warning", res.msg)
      }
    },
    async getImgToken () {
      const parameter = {
        "$url": "getQiniuToken",
      }
      const res = await getImgToken(parameter)
      console.log('上传视频token', res)
      this.imgToken = res.uploadToken
    },
  },
  components: {
    edit,
    loading,
  },
}
</script>

<style scoped>
.u_content_box {
  width: 100%;
}

.u_content_top {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
}

.u_content_input {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #efefef;
}

.u_userImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.editable-row-operations a {
  margin-right: 8px;
}

.goodsImg {
  width: 70rem;
  height: 70rem;
  border-radius: 4rem;
}
</style>